<template>
	<view class="person-location-layout">
		<view class="bgview" @click="toOpenSetting">
			<view class="hint">
				{{$t('personLocation.title')}}
			</view>
			<view class="right">
				<view class="persimion" :class=" !isLocationAllowed?'active':''">
					{{isLocationAllowed?$t('personLocation.allow'):$t('personLocation.nonePersimion')}}
				</view>
				<uni-icons type="right"></uni-icons>
			</view>
			
		</view>
		<view class="hintmsg">
			{{$t('personLocation.hint')}}
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onShow} from "@dcloudio/uni-app";
	import {
		i18nTool
	} from '../../utils/i18en';
const isLocationAllowed = ref(false);


    function toOpenSetting() {
		uni.openAppAuthorizeSetting({
		    success: (res) => {
		        console.log('success')
		    }
		})
    }
	async  function getLocationPermision(){
    	await uni.getLocation({
    	    type: "wgs84 ",
    	    success(res) {
    			isLocationAllowed.value = true;
    		},
    	    fail: function (err) {
    			isLocationAllowed.value = false;
    	    },
    	    complete(com) { },
    	});
    }
	
	onLoad(()=>{
		uni.setNavigationBarTitle({
			title:i18nTool("personLocation.navTitle")
		})
	})
	
	onShow(()=>{
		getLocationPermision();
	})
	
</script>

<style lang="scss" scoped>
.person-location-layout{
	margin: 40rpx 40rpx;
		
	.bgview{
		display: flex;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f1f6f0;
		.hint{
			color: #333;
			font-size: 28rpx;
		}
		.right{
			display: flex;
			align-items: center;
			justify-content: start;
			.persimion{
				color: #999;
				font-size: 26rpx;
				&.active {
					color: #53786C;
				}
			}
		}
	
	}
	.hintmsg{
		padding-top: 40rpx;
		color: #999;
		font-size: 24rpx;
	}
	
}
</style>
